<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>PDF显示</title>
  <script type="text/javascript" src="./jquery.min.js"></script>
  <script type="text/javascript" src="./common.js"></script>
</head>
<style>
  body,
  html {
    border: 0;
    height: 100%;
    width: 100%;
    /* 消除外部滚动条 */
    overflow: hidden;
  }

  .pdf-container {
    height: 100%;
    width: 100%;
  }
</style>

<body>
  <div class="pdf-container">
    <embed id="pdf-play" width="100%" height="100%" style="margin:0px;" name="plugin" src="" type="application/pdf" />
    <button id="fullscreen-button" style="position: absolute; top: 25px; right: 125px;">全屏显示</button>
  </div>

</body>
<script>
  const urlPrfix = 'http://xxx.xxx.xx.xxx:xxxxx/open-dbt';
  //回调函数
  function receiveMessageFromIndex(event) {
    function geturl(name) {
      var reg = new RegExp("[^\?&]?" + encodeURI(name) + "=[^&]+");
      var arr = window.parent.document.getElementById(event.data.dataID).contentWindow.location.search.match(reg);
      if (arr != null) {
        return decodeURI(arr[0].substring(arr[0].search("=") + 1));
      }
      return "";
    }
    const id = geturl('id')
    const url = urlPrfix + geturl("url")
    if (url) {
      document.getElementById("pdf-play").src = url
    }

  }

  //监听message事件
  window.addEventListener("message", receiveMessageFromIndex, false);
  const fullscreenButton = document.getElementById("fullscreen-button");
  const pdfPlay = document.getElementById("pdf-play");

  fullscreenButton.addEventListener("click", toggleFullScreen);

  function toggleFullScreen() {
    if (pdfPlay.requestFullscreen) {
      pdfPlay.requestFullscreen();
    } else if (pdfPlay.mozRequestFullScreen) {
      pdfPlay.mozRequestFullScreen();
    } else if (pdfPlay.webkitRequestFullscreen) {
      pdfPlay.webkitRequestFullscreen();
    } else if (pdfPlay.msRequestFullscreen) {
      pdfPlay.msRequestFullscreen();
    }
  }

</script>

</html>